<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>激光切割机预约管理系统</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Roboto", "Microsoft YaHei", sans-serif;
      }

      body {
        background: linear-gradient(135deg, #141e30, #243b55);
        color: #fff;
        min-height: 100vh;
        padding: 20px;
      }

      .container {
        max-width: 1200px;
        margin: 0 auto;
      }

      header {
        text-align: center;
        margin: 20px 0 30px;
      }

      header h1 {
        font-size: 2.5rem;
        margin-bottom: 10px;
        background: linear-gradient(45deg, #00b4db, #0083b0);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      header p {
        font-size: 1.2rem;
        color: #a0aec0;
        max-width: 800px;
        margin: 0 auto;
        line-height: 1.6;
      }

      .status-container {
        background: rgba(30, 41, 59, 0.8);
        border-radius: 12px;
        padding: 30px;
        margin-bottom: 30px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        transition: all 0.3s ease;
      }

      .status-container:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.35);
      }

      .status-indicator {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 30px;
        background: linear-gradient(145deg, #1a2a3a, #152331);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
      }

      .status-light {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: #4ade80;
        box-shadow: 0 0 30px 10px rgba(74, 222, 128, 0.6);
        transition: all 0.5s ease;
      }

      .status-light.busy {
        background-color: #f87171;
        box-shadow: 0 0 30px 10px rgba(248, 113, 113, 0.6);
      }

      .status-info {
        flex: 1;
      }

      .status-title {
        font-size: 2rem;
        margin-bottom: 15px;
        color: #4ade80;
      }

      .status-title.busy {
        color: #f87171;
      }

      .status-details {
        display: flex;
        gap: 30px;
        flex-wrap: wrap;
        margin-bottom: 20px;
      }

      .status-box {
        background: rgba(15, 23, 42, 0.5);
        padding: 15px;
        border-radius: 10px;
        flex: 1;
        min-width: 200px;
      }

      .status-box h3 {
        font-size: 1.1rem;
        margin-bottom: 10px;
        color: #93c5fd;
      }

      .status-box p {
        font-size: 1.4rem;
        font-weight: bold;
      }

      .status-control {
        margin-top: 15px;
        display: flex;
        justify-content: center;
      }

      .control-btn {
        background: linear-gradient(45deg, #4ade80, #16a34a);
        color: white;
        border: none;
        padding: 12px 25px;
        font-size: 1.1rem;
        border-radius: 8px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
        box-shadow: 0 5px 15px rgba(74, 222, 128, 0.3);
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .control-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(74, 222, 128, 0.4);
      }

      .control-btn.busy {
        background: linear-gradient(45deg, #f87171, #dc2626);
        box-shadow: 0 5px 15px rgba(248, 113, 113, 0.3);
      }

      .control-btn.busy:hover {
        box-shadow: 0 8px 20px rgba(248, 113, 113, 0.4);
      }

      .laser-machine {
        width: 100%;
        height: 180px;
        border-radius: 10px;
        background: linear-gradient(45deg, #6366f1, #8b5cf6);
        margin-top: 15px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      }

      .laser-machine:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 15px;
        background: linear-gradient(45deg, #e0e7ff, #d8b4fe);
      }

      .laser-grid {
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
          ),
          linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
        background-size: 20px 20px;
      }

      .laser-beam {
        position: absolute;
        bottom: 20px;
        left: 50%;
        width: 80%;
        height: 8px;
        background: #93c5fd;
        border-radius: 4px;
        transform: translateX(-50%);
        box-shadow: 0 0 15px #60a5fa;
        animation: beam 3s infinite;
      }

      @keyframes beam {
        0%,
        100% {
          opacity: 0.7;
        }
        50% {
          opacity: 1;
        }
      }

      .control-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        margin-bottom: 40px;
      }

      @media (max-width: 900px) {
        .control-section {
          grid-template-columns: 1fr;
        }
      }

      .booking-form {
        background: rgba(30, 41, 59, 0.8);
        border-radius: 12px;
        padding: 30px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
      }

      .booking-form h2 {
        font-size: 1.8rem;
        margin-bottom: 20px;
        color: #60a5fa;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .form-row {
        margin-bottom: 20px;
      }

      .form-row label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: #cbd5e1;
      }

      .form-row input,
      .form-row select {
        width: 100%;
        padding: 12px 15px;
        border-radius: 8px;
        border: 1px solid #334155;
        background: rgba(15, 23, 42, 0.7);
        color: #fff;
        font-size: 1rem;
      }

      .form-row input:focus {
        outline: none;
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3);
      }

      .btn-submit {
        background: linear-gradient(45deg, #3b82f6, #6366f1);
        color: white;
        border: none;
        padding: 15px 25px;
        font-size: 1.1rem;
        border-radius: 8px;
        cursor: pointer;
        width: 100%;
        font-weight: bold;
        transition: all 0.3s ease;
        box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
      }

      .btn-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
      }

      .btn-submit:active {
        transform: translateY(0);
      }

      .instructions {
        background: rgba(30, 41, 59, 0.8);
        border-radius: 12px;
        padding: 30px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
      }

      .instructions h2 {
        font-size: 1.8rem;
        margin-bottom: 20px;
        color: #f0abfc;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .instructions ul {
        padding-left: 20px;
      }

      .instructions li {
        margin-bottom: 12px;
        line-height: 1.6;
        color: #cbd5e1;
      }

      .instructions li:last-child {
        margin-bottom: 0;
      }

      .instructions .highlight {
        color: #60a5fa;
        font-weight: bold;
      }

      .reservations {
        background: rgba(30, 41, 59, 0.8);
        border-radius: 12px;
        padding: 30px;
        margin-bottom: 40px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
      }

      .reservations-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      }

      .reservations h2 {
        font-size: 1.8rem;
        color: #a78bfa;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .table-container {
        overflow-x: auto;
      }

      table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
      }

      th {
        background: rgba(79, 70, 229, 0.3);
        padding: 15px;
        text-align: left;
        font-weight: bold;
        color: #e0e7ff;
      }

      tr {
        border-bottom: 1px solid #334155;
      }

      td {
        padding: 15px;
        color: #e2e8f0;
      }

      .conflict-1 {
        background: rgba(251, 146, 60, 0.2) !important;
        border-left: 4px solid #f97316;
      }

      .conflict-2 {
        background: rgba(163, 230, 53, 0.2) !important;
        border-left: 4px solid #84cc16;
      }

      .conflict-3 {
        background: rgba(139, 92, 246, 0.2) !important;
        border-left: 4px solid #8b5cf6;
      }

      .conflict-4 {
        background: rgba(6, 182, 212, 0.2) !important;
        border-left: 4px solid #06b6d4;
      }

      .delete-btn {
        color: #f87171;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 1.2rem;
        transition: all 0.2s ease;
        padding: 5px 10px;
        border-radius: 5px;
      }

      .delete-btn:hover {
        background: rgba(248, 113, 113, 0.2);
        transform: scale(1.1);
      }

      footer {
        text-align: center;
        padding: 20px;
        color: #94a3b8;
        font-size: 0.9rem;
        border-top: 1px solid #334155;
        margin-top: 30px;
      }

      .error-message {
        color: #f87171;
        margin-top: 5px;
        font-size: 0.9rem;
      }

      .past-reservation td {
        color: #64748b;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header>
        <h1><i class="fas fa-fire"></i> 激光切割机预约管理系统</h1>
        <p>管理设备使用状态、预约时间，优化团队工作效率</p>
      </header>

      <div class="status-container">
        <div class="status-indicator">
          <div class="status-light" id="statusLight"></div>
        </div>

        <div class="status-info">
          <div class="status-title" id="statusTitle">设备空闲中</div>

          <div class="status-details">
            <div class="status-box">
              <h3>下一个预约</h3>
              <p id="nextBooking">暂无预约</p>
            </div>

            <div class="status-box">
              <h3>当前用户</h3>
              <p id="currentUser">暂无使用</p>
            </div>

            <div class="status-box">
              <h3>今日预约数</h3>
              <p id="todayBookingCount">0</p>
            </div>
          </div>

          <div class="status-control">
            <button class="control-btn" id="toggleStatusBtn">
              <i class="fas fa-power-off"></i> 开始使用
            </button>
          </div>

          <div class="laser-machine">
            <div class="laser-grid"></div>
            <div class="laser-beam"></div>
          </div>
        </div>
      </div>

      <div class="control-section">
        <div class="booking-form">
          <h2><i class="far fa-calendar-plus"></i> 新预约</h2>

          <div class="form-row">
            <label for="name">您的姓名</label>
            <input type="text" id="name" placeholder="请输入您的姓名" />
            <div class="error-message" id="nameError"></div>
          </div>

          <div class="form-row">
            <label for="date">预约日期</label>
            <input type="date" id="date" />
            <div class="error-message" id="dateError"></div>
          </div>

          <div class="form-row">
            <label for="startTime">开始时间</label>
            <input type="time" id="startTime" />
            <div class="error-message" id="startTimeError"></div>
          </div>

          <div class="form-row">
            <label for="endTime">结束时间</label>
            <input type="time" id="endTime" />
            <div class="error-message" id="endTimeError"></div>
          </div>

          <button class="btn-submit" id="submitBtn">提交预约</button>
        </div>

        <div class="instructions">
          <h2><i class="fas fa-info-circle"></i> 使用说明</h2>

          <ul>
            <li><span class="highlight">长时间使用</span>可以提前预约使用</li>
            <li>
              如果您的预约时间与其他用户<span class="highlight">重叠</span
              >，系统将用<span class="highlight">相同颜色</span>标记
            </li>
            <li>预约可<span class="highlight">随时删除</span></li>
            <li>请遵守预约时间，如不能按时使用，请及时取消预约</li>
            <li>
              点击<span class="highlight">【开始使用】</span>按钮可手动<span
                class="highlight"
                >切换设备状态</span
              >
            </li>
            <li>使用后，请<span class="highlight">删除预约</span></li>
            <li>
              若<span class="highlight">误点</span>按钮，<span class="highlight"
                >刷新即可</span
              >，以预约记录为主
            </li>
          </ul>
        </div>
      </div>

      <div class="reservations">
        <div class="reservations-header">
          <h2><i class="far fa-list-alt"></i> 预约记录</h2>
          <div id="filterButtons">
            <button class="btn-filter" id="allBtn">全部</button>
            <button class="btn-filter" id="todayBtn">今天</button>
            <button class="btn-filter" id="futureBtn">即将开始</button>
          </div>
        </div>

        <div class="table-container">
          <table id="reservationsTable">
            <thead>
              <tr>
                <th>姓名</th>
                <th>日期</th>
                <th>开始时间</th>
                <th>结束时间</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody id="reservationsBody">
              <!-- 动态生成预约记录 -->
            </tbody>
          </table>
        </div>
      </div>

      <footer>
        <p>
          激光切割机预约管理系统 &copy; 2023 |
          确保设备高效使用，提高团队协作效率
        </p>
      </footer>
    </div>

    <script>
      // 主要数据
      let reservations =
        JSON.parse(localStorage.getItem("laserReservations")) || [];
      let manualStatus = null; // 'available' 或 'busy'
      let conflictGroups = {};

      // DOM元素
      const statusLight = document.getElementById("statusLight");
      const statusTitle = document.getElementById("statusTitle");
      const nextBooking = document.getElementById("nextBooking");
      const currentUser = document.getElementById("currentUser");
      const todayBookingCount = document.getElementById("todayBookingCount");
      const reservationsBody = document.getElementById("reservationsBody");
      const submitBtn = document.getElementById("submitBtn");
      const allBtn = document.getElementById("allBtn");
      const todayBtn = document.getElementById("todayBtn");
      const futureBtn = document.getElementById("futureBtn");
      const toggleStatusBtn = document.getElementById("toggleStatusBtn");

      // 初始化
      document.addEventListener("DOMContentLoaded", function () {
        // 设置默认日期为今天
        const today = new Date();
        const formattedDate = formatDate(today);
        document.getElementById("date").value = formattedDate;

        // 设置默认时间（1小时后开始，持续1小时）
        const startTime = new Date(today.getTime() + 60 * 60 * 1000);
        const endTime = new Date(startTime.getTime() + 60 * 60 * 1000);

        document.getElementById("startTime").value = formatTime(startTime);
        document.getElementById("endTime").value = formatTime(endTime);

        // 更新状态和表格
        updateStatus();
        updateReservationsTable();

        // 添加事件监听器
        submitBtn.addEventListener("click", submitReservation);
        allBtn.addEventListener("click", () => filterReservations("all"));
        todayBtn.addEventListener("click", () => filterReservations("today"));
        futureBtn.addEventListener("click", () => filterReservations("future"));
        toggleStatusBtn.addEventListener("click", toggleManualStatus);

        // 每30秒更新一次状态
        setInterval(updateStatus, 30000);
      });

      // 提交新预约
      function submitReservation() {
        // 获取表单值
        const name = document.getElementById("name").value.trim();
        const date = document.getElementById("date").value;
        const startTime = document.getElementById("startTime").value;
        const endTime = document.getElementById("endTime").value;

        // 清除之前的错误信息
        clearErrors();

        // 验证输入
        let isValid = true;

        if (!name) {
          document.getElementById("nameError").textContent = "请输入您的姓名";
          isValid = false;
        }

        if (!date) {
          document.getElementById("dateError").textContent = "请选择日期";
          isValid = false;
        }

        if (!startTime) {
          document.getElementById("startTimeError").textContent =
            "请选择开始时间";
          isValid = false;
        }

        if (!endTime) {
          document.getElementById("endTimeError").textContent =
            "请选择结束时间";
          isValid = false;
        }

        // 检查时间段是否合理
        if (startTime && endTime) {
          if (startTime >= endTime) {
            document.getElementById("endTimeError").textContent =
              "结束时间必须晚于开始时间";
            isValid = false;
          }

          // 检查时间段是否太长（不超过3小时）
          const startParts = startTime.split(":");
          const endParts = endTime.split(":");
          const startHour = parseInt(startParts[0]);
          const startMin = parseInt(startParts[1]);
          const endHour = parseInt(endParts[0]);
          const endMin = parseInt(endParts[1]);

          const totalMinutes =
            endHour * 60 + endMin - (startHour * 60 + startMin);

          if (totalMinutes > 180) {
            document.getElementById("endTimeError").textContent =
              "使用时间不能超过3小时";
            isValid = false;
          }
        }

        if (!isValid) return;

        // 创建预约对象
        const reservation = {
          id: Date.now().toString(),
          name: name,
          date: date,
          startTime: startTime,
          endTime: endTime,
          timestamp: new Date().toISOString(),
        };

        // 添加到数组
        reservations.push(reservation);

        // 保存到localStorage
        localStorage.setItem("laserReservations", JSON.stringify(reservations));

        // 更新状态和表格
        updateStatus();
        updateReservationsTable();

        // 清除表单
        document.getElementById("name").value = "";
        document.getElementById("endTime").value = addOneHour(endTime);

        // 显示成功消息
        alert("预约成功！");
      }

      // 删除预约
      function deleteReservation(id) {
        reservations = reservations.filter((res) => res.id !== id);
        localStorage.setItem("laserReservations", JSON.stringify(reservations));
        updateStatus();
        updateReservationsTable();
      }

      // 更新设备状态
      function updateStatus() {
        // 检查是否有手动状态
        if (manualStatus === "busy") {
          statusLight.classList.add("busy");
          statusTitle.classList.add("busy");
          statusTitle.textContent = "设备使用中（手动设置）";
          currentUser.textContent = "手动使用中";
          return;
        } else if (manualStatus === "available") {
          statusLight.classList.remove("busy");
          statusTitle.classList.remove("busy");
          statusTitle.textContent = "设备空闲中（手动设置）";
          currentUser.textContent = "暂无使用";
          return;
        }

        const now = new Date();
        const currentDate = formatDate(now);
        const currentTime = formatTime(now);

        // 当前是否有预约在使用中
        const activeReservation = reservations.find(
          (res) =>
            res.date === currentDate &&
            res.startTime <= currentTime &&
            res.endTime >= currentTime
        );

        // 更新状态指示器
        if (activeReservation) {
          statusLight.classList.add("busy");
          statusTitle.classList.add("busy");
          statusTitle.textContent = "设备使用中";
          currentUser.textContent = activeReservation.name;
        } else {
          statusLight.classList.remove("busy");
          statusTitle.classList.remove("busy");
          statusTitle.textContent = "设备空闲中";
          currentUser.textContent = "暂无使用";
        }

        // 计算下一个预约
        const upcomingReservations = reservations
          .filter((res) => res.date >= currentDate)
          .sort((a, b) => {
            if (a.date !== b.date) return a.date.localeCompare(b.date);
            return a.startTime.localeCompare(b.startTime);
          });

        if (upcomingReservations.length > 0) {
          const next = upcomingReservations[0];
          nextBooking.textContent = `${next.date} ${next.startTime}`;
        } else {
          nextBooking.textContent = "暂无预约";
        }

        // 计算今日预约数
        const todayCount = reservations.filter(
          (res) => res.date === currentDate
        ).length;
        todayBookingCount.textContent = todayCount;
      }

      // 更新预约表格
      function updateReservationsTable() {
        // 找出冲突的时间段
        detectTimeConflicts();

        const now = new Date();
        const currentDate = formatDate(now);
        const currentTime = formatTime(now);

        let html = "";

        // 按照日期和时间排序预约
        const sortedReservations = [...reservations].sort((a, b) => {
          if (a.date !== b.date) return a.date.localeCompare(b.date);
          return a.startTime.localeCompare(b.startTime);
        });

        sortedReservations.forEach((res) => {
          // 确定行状态
          const isPast =
            res.date < currentDate ||
            (res.date === currentDate && res.endTime < currentTime);
          const isActive =
            res.date === currentDate &&
            res.startTime <= currentTime &&
            res.endTime >= currentTime;
          const isUpcoming = !isPast && !isActive;

          let statusText = "";
          let textClass = "";

          if (isPast) {
            statusText = "已完成";
            textClass = "past-reservation";
          } else if (isActive) {
            statusText = "使用中";
            textClass = "active";
          } else {
            statusText = "即将开始";
          }

          // 获取冲突组（如果有）
          const conflictClass = conflictGroups[res.id]
            ? `conflict-${conflictGroups[res.id]}`
            : "";

          html += `
                    <tr class="${textClass} ${conflictClass}">
                        <td>${res.name}</td>
                        <td>${res.date}</td>
                        <td>${res.startTime}</td>
                        <td>${res.endTime}</td>
                        <td>${statusText}</td>
                        <td>
                            <button class="delete-btn" onclick="deleteReservation('${res.id}')">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                `;
        });

        reservationsBody.innerHTML =
          html || '<tr><td colspan="6">暂无预约记录</td></tr>';
      }

      // 检测时间冲突
      function detectTimeConflicts() {
        // 清除之前的冲突组
        conflictGroups = {};

        // 用于跟踪当前冲突组
        let nextGroupId = 1;
        const conflictMap = {};

        // 按日期分组预约
        const reservationsByDate = {};
        reservations.forEach((res) => {
          if (!reservationsByDate[res.date]) {
            reservationsByDate[res.date] = [];
          }
          reservationsByDate[res.date].push(res);
        });

        // 遍历每一天的预约
        for (const date in reservationsByDate) {
          const dateReservations = [...reservationsByDate[date]].sort((a, b) =>
            a.startTime.localeCompare(b.startTime)
          );

          // 用于存储该日期下的冲突组
          const dateConflictMap = {};

          // 检查每一对预约是否冲突
          for (let i = 0; i < dateReservations.length; i++) {
            for (let j = i + 1; j < dateReservations.length; j++) {
              const resA = dateReservations[i];
              const resB = dateReservations[j];

              // 检查时间段是否重叠
              if (timeOverlaps(resA, resB)) {
                // 如果两个预约都没有冲突组，创建一个新组
                if (!dateConflictMap[resA.id] && !dateConflictMap[resB.id]) {
                  const groupId = nextGroupId++;
                  dateConflictMap[resA.id] = groupId;
                  dateConflictMap[resB.id] = groupId;
                }
                // 如果其中一个有冲突组，将另一个加入同一个组
                else if (
                  dateConflictMap[resA.id] &&
                  !dateConflictMap[resB.id]
                ) {
                  dateConflictMap[resB.id] = dateConflictMap[resA.id];
                } else if (
                  !dateConflictMap[resA.id] &&
                  dateConflictMap[resB.id]
                ) {
                  dateConflictMap[resA.id] = dateConflictMap[resB.id];
                }
                // 如果两个属于不同组，合并这两个组
                else if (
                  dateConflictMap[resA.id] !== dateConflictMap[resB.id]
                ) {
                  const mergeGroup = dateConflictMap[resA.id];
                  const oldGroup = dateConflictMap[resB.id];

                  // 找到所有属于oldGroup的预约，更新为mergeGroup
                  for (const id in dateConflictMap) {
                    if (dateConflictMap[id] === oldGroup) {
                      dateConflictMap[id] = mergeGroup;
                    }
                  }
                }
              }
            }
          }

          // 将日期冲突组加入全局冲突组
          for (const id in dateConflictMap) {
            conflictGroups[id] = dateConflictMap[id];
          }
        }
      }

      // 检查两个时间段是否重叠
      function timeOverlaps(resA, resB) {
        // 时间字符串转换为可比较的值
        const aStart = timeToMinutes(resA.startTime);
        const aEnd = timeToMinutes(resA.endTime);
        const bStart = timeToMinutes(resB.startTime);
        const bEnd = timeToMinutes(resB.endTime);

        return aStart < bEnd && bStart < aEnd;
      }

      // 将时间转换为分钟数
      function timeToMinutes(time) {
        const [hours, minutes] = time.split(":").map(Number);
        return hours * 60 + minutes;
      }

      // 过滤预约
      function filterReservations(filterType) {
        // 移除所有活动按钮
        document.querySelectorAll(".btn-filter").forEach((btn) => {
          btn.classList.remove("active");
        });

        // 设置活动按钮
        document.getElementById(`${filterType}Btn`).classList.add("active");

        const now = new Date();
        const currentDate = formatDate(now);
        const currentTime = formatTime(now);

        // 应用过滤器
        if (filterType === "today") {
          reservations = reservations.filter((res) => res.date === currentDate);
        } else if (filterType === "future") {
          reservations = reservations.filter(
            (res) =>
              res.date > currentDate ||
              (res.date === currentDate && res.endTime > currentTime)
          );
        }

        // 更新表格
        updateReservationsTable();

        // 重置所有预约
        if (filterType === "all") {
          reservations =
            JSON.parse(localStorage.getItem("laserReservations")) || [];
          updateReservationsTable();
        }
      }

      // 清除错误信息
      function clearErrors() {
        const errorElements = document.querySelectorAll(".error-message");
        errorElements.forEach((el) => {
          el.textContent = "";
        });
      }

      // 手动切换设备状态
      function toggleManualStatus() {
        if (!manualStatus || manualStatus === "available") {
          manualStatus = "busy";
          toggleStatusBtn.innerHTML = '<i class="fas fa-stop"></i> 结束使用';
          toggleStatusBtn.classList.remove("available");
          toggleStatusBtn.classList.add("busy");
        } else {
          manualStatus = "available";
          toggleStatusBtn.innerHTML =
            '<i class="fas fa-power-off"></i> 开始使用';
          toggleStatusBtn.classList.remove("busy");
          toggleStatusBtn.classList.add("available");
        }

        // 更新状态显示
        updateStatus();
      }

      // 时间格式化辅助函数
      function formatDate(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, "0");
        const day = String(date.getDate()).padStart(2, "0");
        return `${year}-${month}-${day}`;
      }

      function formatTime(date) {
        const hours = String(date.getHours()).padStart(2, "0");
        const minutes = String(date.getMinutes()).padStart(2, "0");
        return `${hours}:${minutes}`;
      }

      function addOneHour(time) {
        const [hours, minutes] = time.split(":").map(Number);
        let newHours = hours + 1;
        if (newHours >= 24) newHours = 0;
        return `${String(newHours).padStart(2, "0")}:${String(minutes).padStart(
          2,
          "0"
        )}`;
      }
    </script>
  </body>
</html>
